<template>
  <div>
    <div class="content">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="用户名" class="form-header">
          <el-select
            v-model="formInline.userId"
            placeholder="请选择"
            class="slect"
           :disabled="isEdit"
          >
            <el-option
              v-for="item in userList"
              :key="item.userId"
              :label="item.userName"
              :value="item.userId"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="项目名称" class="form-header">
          <el-input
            v-model="formInline.projectName"
            placeholder="项目名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="状态" class="form-header">
          <el-select
            v-model="formInline.projectStutas"
            placeholder="请选择"
            class="slect"
          >
            <el-option
              v-for="item in [
                '未生效',
                '正在学习',
                '学习失败',
                '学习成功',
                '重新学习',
                '成本稳投',
              ]"
              :key="item"
              :label="item"
              :value="item"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="出价模式" class="form-header">
          <el-select
            v-model="formInline.biddingMode"
            placeholder="请选择"
            class="slect"
          >
            <el-option
              v-for="item in [
                '目标转化成本',
                '增强模式',
                '放量模式',
                '目标ROI',
              ]"
              :key="item"
              :label="item"
              :value="item"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="营销目标" class="form-header">
          <el-input
            v-model="formInline.marketingObjectives"
            placeholder="营销目标"
          ></el-input>
        </el-form-item>
        <el-form-item label="投放模式" class="form-header">
          <el-select
            v-model="formInline.deliveryMode"
            placeholder="请选择"
            class="slect"
          >
            <el-option
              v-for="item in ['自定义', 'AI投放']"
              :key="item"
              :label="item"
              :value="item"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="产品库类型" class="form-header">
          <el-select
            v-model="formInline.libraryType"
            placeholder="请选择"
            class="slect"
          >
            <el-option
              v-for="item in ['未设置', '教育库', '汽车库', '医美库', '旅游库']"
              :key="item"
              :label="item"
              :value="item"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="转化出价" class="form-header">
          <el-input
            v-model="formInline.conversionBid"
            placeholder="转化出价"
          ></el-input>
        </el-form-item>
        <el-form-item label="创建时间" class="form-header">
          <el-date-picker
            v-model="formInline.createTime"
            type="datetime"
            format="yyyy-MM-dd HH:mm:ss"
            value-format="yyyy-MM-dd HH:mm:ss"
            placeholder="选择创建时间"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="转化指导出价" class="form-header">
          <el-input
            v-model="formInline.conversionGuidanceBidding"
            placeholder="转化指导出价"
          ></el-input>
        </el-form-item>
        <el-form-item label="深度转化出价" class="form-header">
          <el-input
            v-model="formInline.conversionGuidanceBidding"
            placeholder="深度转化出价"
          ></el-input>
        </el-form-item>
        <el-form-item label="深度转化状态" class="form-header">
          <el-select
            v-model="formInline.deepConversionStatus"
            placeholder="请选择"
            class="slect"
          >
            <el-option
              v-for="item in [
                '仅优化目标转化',
                '同时优化深度转化',
                '同时优化深度价值',
                '优化深度转化中',
              ]"
              :key="item"
              :label="item"
              :value="item"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="ROI系数" class="form-header">
          <el-input
            v-model="formInline.roiCoefficient"
            placeholder="ROI系数"
          ></el-input>
        </el-form-item>
        <el-form-item label="生效范围" class="form-header">
          <el-input
            v-model="formInline.effectiveScope"
            placeholder="生效范围"
          ></el-input>
        </el-form-item>
        <el-form-item label="转化资产" class="form-header">
          <el-select
            v-model="formInline.convertingAssets"
            placeholder="请选择"
            class="slect"
          >
            <el-option
              v-for="item in ['不限', '资产类型', '指定资产']"
              :key="item"
              :label="item"
              :value="item"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="数据来源" class="form-header">
          <el-select
            v-model="formInline.dataSources"
            placeholder="请选择"
            class="slect"
          >
            <el-option
              v-for="item in [
                '不限',
                '网页JS布码',
                '线索API',
                '咨询工具授权',
                '木鱼',
                '应用API',
                '应用SDK',
                '电话数据授权',
                '百度智能小程',
                'SDK',
                '爱番番',
                '百度APP',
                '百度统计网站导入',
                '百度统计小程序导入',
                '百度健康商城',
                '爱采购',
              ]"
              :key="item"
              :label="item"
              :value="item"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="深度转化类型" class="form-header">
          <el-input
            v-model="formInline.deepConversionType"
            placeholder="深度转化类型"
          ></el-input>
        </el-form-item>
        <el-form-item label="深度转化目标指导出价" class="form-header">
          <el-input
            v-model="formInline.deepGuidancePrice"
            placeholder="深度转化目标指导出价"
          ></el-input>
        </el-form-item>
        <el-form-item label="共享预算" class="form-header">
          <el-input
            v-model="formInline.sharedBudget"
            placeholder="共享预算"
          ></el-input>
        </el-form-item>
        <el-form-item label="消费" class="form-header">
          <el-input
            v-model="formInline.consumption"
            placeholder="消费"
          ></el-input>
        </el-form-item>
        <el-form-item label="展现" class="form-header">
          <el-input v-model="formInline.toShow" placeholder="展现"></el-input>
        </el-form-item>
        <el-form-item label="点击" class="form-header">
          <el-input v-model="formInline.click" placeholder="点击"></el-input>
        </el-form-item>
        <el-form-item label="平均点击价格" class="form-header">
          <el-input
            v-model="formInline.avgClickPrice"
            placeholder="平均点击价格"
          ></el-input>
        </el-form-item>
        <el-form-item label="无效转化过滤量" class="form-header">
          <el-input
            v-model="formInline.invalidFilteringAmount"
            placeholder="无效转化过滤量"
          ></el-input>
        </el-form-item>
        <el-form-item label="目标转化量" class="form-header">
          <el-input
            v-model="formInline.targetConversionAmount"
            placeholder="目标转化量"
          ></el-input>
        </el-form-item>
        <el-form-item label="目标转化成本" class="form-header">
          <el-input
            v-model="formInline.targetConversionCost"
            placeholder="目标转化成本"
          ></el-input>
        </el-form-item>
        <el-form-item label="目标转化率" class="form-header">
          <el-input
            v-model="formInline.targetConversionRate"
            placeholder="目标转化率"
          ></el-input>
        </el-form-item>
        <el-form-item label="深度转化率" class="form-header">
          <el-input
            v-model="formInline.deepConversionRate"
            placeholder="深度转化率"
          ></el-input>
        </el-form-item>
        <el-form-item label="推广场景" class="form-header">
          <el-input
            v-model="formInline.promotionScenario"
            placeholder="推广场景"
          ></el-input>
        </el-form-item>
        <el-form-item label="推广类型" class="form-header">
          <el-select
            v-model="formInline.promotionType"
            placeholder="请选择推广类型"
            class="slect"
          >
            <el-option
              v-for="item in [
                { value: '1', label: '推广业务' },
                { value: '2', label: '营销目标' },
              ]"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </div>
    <div class="queding">
      <el-button type="primary" @click="handleSubmit">确定</el-button>
      <el-button type="primary" plain @click="$emit('handleCancle')"
        >取消</el-button
      >
    </div>
  </div>
</template>
<script>
import { listAllUser } from "@/api/caiwu/zhgl";
import { add, edit } from "@/api/sstg/xmtg";
import { mapState } from "vuex";
export default {
  name: "zhanghugai",
  data() {
    return {
      formInline: {
        userId: "",
        projectName: "",
        projectStutas: "",
        biddingMode: "",
        marketingObjectives: "",
        deliveryMode: "",
        libraryType: "",
        conversionBid: "",
        createTime: "",
        conversionGuidanceBidding: "",
        deepConversionBidding: "",
        deepConversionStatus: "",
        roiCoefficient: "",
        effectiveScope: "",
        convertingAssets: "",
        dataSources: "",
        deepConversionType: "",
        deepGuidancePrice: "",
        sharedBudget: "",
        consumption: "",
        toShow: "",
        click: "",
        avgClickPrice: "",
        invalidFilteringAmount: "",
        targetConversionAmount: "",
        targetConversionCost: "",
        targetConversionRate: "",
        deepConversionRate: "",
        promotionScenario: "",
        promotionType: "",
      },
      userList: [],
    };
  },
  computed: {
    ...mapState(["user"]),
  },
  props: {
    // 编辑数据
    objData: {
      type: Object,
      default: () => {},
    },
    isEdit: {
      type: Boolean,
      default: false,
    },
  },
  mounted() {
    // 根据用户角色判断当前用户是否管理员角色，是则可下拉选择全量用户，否则是普通用户，使用当前用户id
    if ("admin".includes(this.user.roles)) {
      this.getList();
      this.formInline.userId = this.user.id;
    }
    // 是否是编辑
    if (this.isEdit) {
      this.formInline = this.objData;
    } else {
      this.resetForm();
    }
  },
  methods: {
    /** 查询用户列表 */
    getList() {
      listAllUser({}).then((res) => {
        res.data.forEach((item) => {
          this.userList.push({
            userName: item.userName,
            userId: item.userId,
          });
        });
      });
    },
    // 新增、编辑提交
    handleSubmit() {
      let apiUrl = this.isEdit ? edit : add;
      // let params = this.isEdit
      //   ? {
      //       ...this.formInline,
      //       trendsId: this.objData.trendsId,
      //     }
      //   : this.formInline;
      apiUrl(this.formInline).then((res) => {
        if (res.code === 200) {
          this.$emit("handleCancle");
        }
      });
    },
    // 重置表单
    resetForm() {
      this.formInline = {
        userId: this.user.id,
        projectName: "",
        projectStutas: "",
        biddingMode: "",
        marketingObjectives: "",
        deliveryMode: "",
        libraryType: "",
        conversionBid: "",
        createTime: "",
        conversionGuidanceBidding: "",
        deepConversionBidding: "",
        deepConversionStatus: "",
        roiCoefficient: "",
        effectiveScope: "",
        convertingAssets: "",
        dataSources: "",
        deepConversionType: "",
        deepGuidancePrice: "",
        sharedBudget: "",
        consumption: "",
        toShow: "",
        click: "",
        avgClickPrice: "",
        invalidFilteringAmount: "",
        targetConversionAmount: "",
        targetConversionCost: "",
        targetConversionRate: "",
        deepConversionRate: "",
        promotionScenario: "",
        promotionType: "",
      };
    },
  },
};
</script>
<style scoped>
.queding {
  padding-bottom: 28px;
  text-align: center;
  display: flex;
  justify-content: space-around;
  width: 34%;
  margin: 0 auto;
}
.form-header {
  width: 492px;
  border: none;
}
.slect {
  width: 204px;
}
.content {
  width: 90%;
  margin: 0 auto;
  margin-top: 30px;
}
</style>
